import { membersProject, projectMembersUpdate } from '@/services/workBench';
import { useStoreWorkbench } from '@/store/workbench';
import {
  memberPermissionOption,
  memberPermissionOptionBro,
} from '@/utils/constant';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Card, Empty, Segmented, Select } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.less';

const Member: React.FC = ({}) => {
  const { currentMenuItem } = useStoreWorkbench();
  const [segmentedValue, setSegmentedValue] = useState('成员');
  const [selectValue, setSelectValue] = useState('全部权限');
  const [memberList, setMemberList] = useState<any>([]);
  const [adminInfo, setAdminInfo] = useState<any>(null);

  const init = async () => {
    // projectMemberList
    const param: any = {
      projectId: currentMenuItem.projectId,
      // permission: 'read',
    };
    if (segmentedValue === '访客') {
      param.permission = 'read';
    }
    if (segmentedValue === '成员') {
      param.permission = 'read';
      if (selectValue !== '全部权限') {
        param.permission = selectValue;
      } else {
        delete param.permission;
      }
    }
    const { code, data } = await membersProject(param);
    if (code === 200) {
      setMemberList(data);
      const flag = data.find((item: any) => item.permission === 'admin');
      if (flag) {
        setAdminInfo(flag);
      } else {
        setAdminInfo(null);
      }
    }
  };

  useEffect(() => {
    if (currentMenuItem && currentMenuItem.projectId) {
      init();
    }
  }, [currentMenuItem, segmentedValue, selectValue]);

  const handleSoloChange = async (value: string, record: any) => {
    console.log('value====value', value);
    await projectMembersUpdate({
      permission: value,
      id: record.id,
    });
  };

  return (
    <div className={styles['member']}>
      <Segmented
        value={segmentedValue}
        options={[
          { label: '成员', value: '成员' },
          { label: '访客', value: '访客' },
        ]}
        onChange={(value) => setSegmentedValue(value)}
      />
      <br />
      {segmentedValue === '成员' ? (
        <Select
          size="small"
          value={selectValue}
          onChange={(value) => setSelectValue(value)}
          style={{ width: 120, marginTop: 20, marginBottom: 20 }}
          options={[
            {
              value: '全部权限',
              label: '全部权限',
            },
            ...memberPermissionOption,
          ]}
        />
      ) : (
        <div style={{ marginBottom: 20 }} />
      )}

      <Card
        title={
          <div className="flex-left">
            <Avatar
              size={26}
              icon={<UserOutlined />}
              style={{ marginRight: 16 }}
            />
            {currentMenuItem?.ownerId}
          </div>
        }
        extra={<div>所有者</div>}
        style={{ width: '100%' }}
      >
        <div className={styles['avatar-wrap']}>
          {memberList && memberList.length > 0 ? (
            memberList.map((item: any, index: number) => (
              <div
                className={`flex-between  ${styles['avatar-item']}`}
                key={index}
              >
                <div className="flex-left">
                  <Avatar
                    size={26}
                    icon={<UserOutlined />}
                    style={{ marginRight: 16 }}
                  />
                  <span style={{ fontSize: 16, fontWeight: 600 }}>
                    {item?.userDto?.name}
                  </span>
                </div>
                <Select
                  size="small"
                  // value="全部权限"
                  defaultValue={item?.permission}
                  style={{ width: 120 }}
                  options={memberPermissionOptionBro}
                  onChange={(value) => handleSoloChange(value, item)}
                />
              </div>
            ))
          ) : (
            <>
              <Empty style={{ marginTop: 20 }} />
            </>
          )}
        </div>
      </Card>
    </div>
  );
};

export default Member;
